<template>
  <!-- 会议预约管理 -->
  <div class="meeting-room-management">
    <el-segmented v-model="value" @change="SubmitGetMeet" :options="options" :direction="direction"
      :size="size"></el-segmented>
    <el-divider />
    <!--查询条件-->
    <div class="filter-bar">
      <el-form-item>
        <el-form-item>
          <el-input v-model="MeetApprovalNum.meetingTopic" placeholder="请输入会议主题" clearable />
        </el-form-item>
        <el-date-picker v-model="MeetApprovalNum.startTime" placeholder="请输会议开始时间" type="date" clearable />
        <el-date-picker v-model="MeetApprovalNum.endTime" placeholder="请输会议结束时间" type="date" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="SubmitGetMeet">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="">重置</el-button>
      </el-form-item>
    </div>
    <!--数据展示-->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="meetingRoom" label="会议室" />
      <el-table-column prop="meetingTopic" label="会议主题" />
      <el-table-column prop="userName" label="主持人" />
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
      <el-table-column prop="address" label="参会人数">
        <template v-slot="scope">
          <span>{{ (scope.row.meetingParticipants || '').split(',').length }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="提交时间" />
      <el-table-column v-if="IsShowResult != 0" prop="currentStatus" label="审批结果">
        <template v-slot="scope">
          <span>{{ scope.row.currentStatus === 1 ? '通过' : '退回' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">

        </template>
      </el-table-column>
    </el-table>
    <!--底部操作-->
    <div class="footer-bar">
      <div class="batch-actions">
        <label for="select-all-footer">选择全部</label>
        <button class="secondary-button">全部删除</button>
        <button class="secondary-button">反向选择</button>
        <button class="secondary-button">更多操作</button>
        <!--分页-->
        <Pagination :pageIndex="MeetApprovalNum.pageIndex" :pageSize="MeetApprovalNum.pageSize" :count="pageNum.count"
          :pcount="pageNum.pcount" v-on:pagination="pageWay" />
      </div>
    </div>
  </div>
  <!--会议详情-->
  <el-dialog v-model="MeetingdetailsdialogVisible" fullscreen>
    <div>
      <div class="details-card">
        <section class="info-section">
          <div style="background-color: #F9F9F9;height: 50px;">
            <span class="left-border"></span>
            <span>会议详情</span>
            <el-button type="primary" style="float: right;" @click="MeetingdetailsdialogVisible = false"
              round>返回</el-button>
          </div>
          <div class="section-title">
            <span class="left-border"></span>
            <span>基本信息</span>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">会议名称:</span>
              <span class="value">{{ MeetingDetailsNum.meetingName }}</span>
            </div>
            <div class="info-item">
              <span class="label">会议时间:</span>
              <span class="value">{{ MeetingDetailsNum.createMeetingTime }}</span>
            </div>
            <div class="info-item">
              <span class="label">会议地点:</span>
              <span class="value">{{ MeetingDetailsNum.meetingRoom }}</span>
            </div>
            <div class="info-item full-width attendees-item">
              <span class="label">参会人员:</span>
              <div class="value">
                <span>
                  <el-tag type="success" v-for="item in MeetingDetailsNum.meetingParticipants">
                    <span>{{ item }}&nbsp;&nbsp;</span>
                  </el-tag>
                </span>
              </div>
            </div>
            <div class="info-item full-width">
              <span class="label">线上地址:</span>
              <a href="">{{ MeetingDetailsNum.meetingAddress }}</a>
              <span class="label">会议电话:</span>
              <span class="value">{{ MeetingDetailsNum.meetingTel }}</span>
            </div>
          </div>
        </section>

        <div class="section-title">
          <span class="left-border"></span>
          <span>会议内容</span>

        </div>
        <div class="info-item full-width attendees-item">
          <span>
            {{ MeetingDetailsNum.meetingDetailsContent }}
          </span>
        </div>
        <section class="info-section attachments-section">
          <span class="label">会议附件:</span>
          <span class="value">
            <a href="">{{ MeetingDetailsNum.meetingAttachments }}</a>
          </span>
        </section>
      </div>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import Pagination from '@/components/icons/Pagination.vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useCounterStore } from '@/stores/counter';
import type { SegmentedProps } from 'element-plus'
import {
  GetMeetApproval
} from '../../api/MeetApproval';
// 页面加载时执行
onMounted(async () => {
  GetMeetApprovalWay()
})
//pinia
const route = useCounterStore();
//表格数据
const tableData = ref([{}])
//是否显示审批结果
const IsShowResult = ref(0)
// 会议详情
const MeetingdetailsdialogVisible = ref(false)
// 会议详情数据
const MeetingDetailsNum = ref({
  meetingName: "",
  createMeetingTime: "",
  meetingRoom: "",
  meetingParticipants: [String],
  meetingAddress: "",
  meetingTel: "",
  meetingDetailsContent: "",
  meetingAttachments: ""
})
// 会议审批信息
const MeetingAprovalNum = ref({
  "meetingId": 37,
  "approvalInstructions": "???",
  "approvalResults": 1,
  "operatorName": "zhangsan"
})
// 分页数据
const pageNum = ref({
  count: 0,
  pcount: 0
})
//会议审批信息api参数
const MeetApprovalNum = reactive({
  "pageIndex": 1,
  "pageSize": 10,
  "meetingTopic": "",
  "startTime": "",
  "endTime": "",
  "currentStatus": 1
})
//顶部选择是否审批组件值
const value = ref(1)
const direction = ref<SegmentedProps['direction']>('horizontal')
const size = ref<SegmentedProps['size']>('default')
const options = [
  {
    label: '待审批',
    value: 1,
  },
  {
    label: '已审批',
    value: 2,
  }
]
///////////////////////////////////////////////////////////////
//向父组件传递分页数据
const pageWay = (pageIndex: number, pageSize: number) => {
  MeetApprovalNum.pageIndex = pageIndex;
  MeetApprovalNum.pageSize = pageSize;
  GetMeetApprovalWay()
}
//获取会议审批信息
const GetMeetApprovalWay = async () => {
  try {
    const way = await GetMeetApproval(MeetApprovalNum);
    tableData.value = way.data.data.data
    IsShowResult.value = way.data.data.data[0].approvalResults
    console.log(IsShowResult.value);
  } catch (error) {
    console.error('数据查询失败', error);
  }
}
//条件查询
const SubmitGetMeet = () => {
  MeetApprovalNum.currentStatus = value.value;
  GetMeetApprovalWay();
}



</script>




<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.meeting-room-management {
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
  color: #333;
  background-color: #f5f7fa;
  /* 模仿背景色 */
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 20px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.filter-bar,
.action-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.filter-bar input[type="text"] {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 200px;
}

h2 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

.back-button:hover {
  background-color: #66b1ff;
}

.details-card {
  background-color: #ffffff;
  /* 卡片背景色 */
  border: 1px solid #e4e7ed;
  /* 卡片边框 */
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  /* 轻微阴影 */
}

.info-section {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f2f5;
  /* 分隔线 */
}

.info-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-top: 0;
  margin-bottom: 20px;
  /* 图片中标题前似乎没有特殊标记，保持简洁 */
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /* 响应式列 */
  gap: 15px 20px;
  /* 行间距 列间距 */
  font-size: 14px;
  line-height: 1.6;
}

.info-item {
  display: flex;
  /* 用于标签和内容的对齐 */
  flex-direction: row;
  /* 默认值，标签和内容在一行 */
  align-items: flex-start;
  /* 顶部对齐 */
}

.info-item .label {
  color: #606266;
  /* 标签颜色 */
  margin-right: 8px;
  white-space: nowrap;
  /* 标签不换行 */
  flex-shrink: 0;
  /* 防止标签被压缩 */
}

.info-item .value {
  color: #303133;
  /* 内容颜色 */
  word-break: break-all;
  /* 长链接或文本换行 */
}

.info-item.full-width {
  grid-column: 1 / -1;
  /* 占满整行 */
}

.info-item.attendees-item .value {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attendee-tag {
  background-color: #f0f5ff;
  /* 类似图片的浅蓝色/灰色背景 */
  color: #409EFF;
  /* 标签文字颜色 */
  border: 1px solid #d9ecff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
}

.meeting-content-list {
  padding-left: 20px;
  /* 给ol的数字留出空间 */
  font-size: 14px;
  color: #303133;
  line-height: 1.8;
}

.meeting-content-list li {
  margin-bottom: 8px;
}

.attachments-section {
  font-size: 14px;
}

.attachments-section .label {
  color: #606266;
  margin-right: 8px;
}

a {
  color: #409EFF;
  /* 链接颜色 */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s, color 0.3s;
}

.primary-button {
  background-color: #409eff;
  color: white;
}

.primary-button:hover {
  background-color: #66b1ff;
}

.secondary-button {
  background-color: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.secondary-button:hover {
  background-color: #ecf5ff;
  color: #409eff;
  border-color: #c6e2ff;
}

.danger-button {
  background-color: #f56c6c;
  color: white;
}

.danger-button:hover {
  background-color: #f78989;
}

.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 10px 0;
}

.batch-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #606266;
}

.batch-actions input[type="checkbox"] {
  margin-right: 5px;
}

.section-title {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  margin: 24px 0 12px;
  color: #303133;
}

.left-border {
  width: 4px;
  height: 20px;
  background-color: #409EFF;
  /* Element Plus 蓝 */
  margin-right: 8px;
  border-radius: 2px;
}
</style>
